import React, { Component } from 'react';
import Button from './Button';
// import PropTypes from 'prop-types';

import { Link } from 'react-router-dom';

export default class NavMenu extends Component {

    static defaultProps = {
        horizontal: false,
    }
    render() {
        const { data, horizontal, editBtn, rmBtn, onClick = () => { } } = this.props;
        const listStyle = horizontal ? "menu-list-h" : "menu-list-v";
        const menuStyle = horizontal ? "nav-menu-h" : "nav-menu-v";
        console.log('data',data);
        const renderMenu = data.map((a, key) => {
            return (
                <li key={key} className={listStyle}>
                    {editBtn ? <Link to={a.aLink}>{a.label}</Link> : <Link to={a.link}>{a.label}</Link>}
                    {rmBtn ? <i className="fa fa-times  pull-right" style={{ cursor: "pointer", marginTop: "4px" }} aria-hidden="true" onClick={() => onClick(a._id, "d")}></i> : null}
                    {editBtn ? <i className="fa fa-pencil-square-o pull-right" style={{ cursor: "pointer", marginTop: "4px" }} aria-hidden="true" onClick={() => onClick(a._id, "e")}></i> : null}
                </li >
            )
        })
        return (
            <ul className={menuStyle} >
                {renderMenu}
            </ul>
        )

    }
}
// NavMenu.propTypes = {
//     data: PropTypes.array.isRequired
// }
